<template>
  <div class="ele-body ele-body-card" v-loading="fullscreenLoading">
    <el-row :gutter="15" v-if="name">
      <el-col :span="24" style="text-align: left;font-size:24px">{{name}}</el-col>
    </el-row>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card class="analysis-chart-card" shadow="never">
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#333;font-size: 12px;height: calc(64px);">
            <div style="display: flex;width:100%;justify-content: space-between;padding: 0 10px">
              <div style="display: flex;" class="top-item">
                <img src="@/assets/avatar.png" alt="" style="width: 40px;height: 40px;border-radius: 50%">
                <div style="display: flex;flex-direction: column;justify-content:flex-end;color: #333;border-right:1px solid #ccc;padding-right: 20px">
                  <div style="margin-bottom: 10px;height: 20px;width: 100%;display: flex;justify-content: flex-start">
                    {{ analysisData.name }}
                  </div>
                  <div style="display: flex;justify-content: flex-start;width: 100%;">{{ analysisData.gende }}</div>
                </div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.organization }}</div>
                <div>学院</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.class }}</div>
                <div>专业班级</div>
              </div>
              <div class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.superior }}</div>
                <div>院系</div>
              </div>
              <div class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.professional }}</div>
                <div>专业</div>
              </div>
              <div class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.roll }}</div>
                <div>学籍号</div>
              </div>
              <div class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 10px;height: 20px;">{{ analysisData.account }}</div>
                <div>学生账户</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 顶部筛选 -->
    <el-row :gutter="15">
      <el-form ref="schoolForm" :inline="true" :model="schoolForm" label-width="80px">
        <el-form-item label="统计年度">
          <el-select
            filterable
            clearable
            v-model="schoolForm.tongji"
            @change="getAllData"
            size="small"
            placeholder="-学年统计-"
            class="ele-block">
            <el-option v-for="item in xuenianList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期">
          <el-col :span="11">
            <el-date-picker
              v-model="schoolForm.start_end"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card class="analysis-chart-card teshu-card" shadow="never" style="padding: 10px 5px 0px 0px;">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div>成绩概览</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(174px);position: relative">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(170px);"
              :option="shengaopieTopOne"/>
            <div style="position: absolute;display: flex;left: 40%;top: 30%;color: #333;width: 54%;">
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div class="u-flex-center" style="margin-bottom: 10px;height: 20px;font-size: 20px">
                  {{ analysisData.score }}
                </div>
                <div class="u-flex-center">成绩平均分</div>
              </div>
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div class="u-flex-center" style="margin-bottom: 10px;height: 20px;font-size: 20px">
                  {{ analysisData.class_rank }}
                </div>
                <div class="u-flex-center">班级排名前</div>
              </div>
              <div style="display: flex;flex-direction: column;justify-content:flex-end;width: 50%;">
                <div class="u-flex-center" style="margin-bottom: 10px;height: 20px;font-size: 20px">
                  {{ analysisData.grade_rank }}
                </div>
                <div class="u-flex-center">年级排名前</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <el-card
	        class="analysis-chart-card teshu-card" shadow="never" style="padding: 10px 5px 0px 0px;">
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;height: calc(204px);">
            <ele-chart
              ref="visitHourChart"
              style="height: calc(200px);"
              :option="shengaobarTop"/>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 二行 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card header="参与情况"
                 shadow="never"
                 body-style="padding: 10px 0px 0 0;" style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div class="moddile" style="display: flex;justify-content: center;align-items: center">
            <div class="moddile-item">
              <div style="color: #8E8E8E;">运动总人数</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_num }}</div>
            </div>
            <div class="moddile-item">
              <div style="color: #8E8E8E;">运动总时长</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_time }}</div>
            </div>
            <div class="moddile-item">
              <div style="color: #8E8E8E;">人均运动时长</div>
              <div style="font-size: 20px;">{{ canyun_ting.zong_avg }}</div>
            </div>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: 256px;"
            :option="xueYuanChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card header="班级运动时长排名"
                 shadow="never"
                 body-style="padding: 10px 0px 0 0;" style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-button-group style="height: 40px;">
              <el-button :type="iszongshichang=='1'?'primary':''" size="small" @click="changeyundong('1')">运动总时长
              </el-button>
              <el-button :type="iszongshichang=='2'?'primary':''" size="small" @click="changeyundong('2')">跑步总里程
              </el-button>
            </el-button-group>
          </div>
          <div style="height: calc(272px);">
            <el-table
              height="272"
              :data="iszongshichang=='1'?class_rank1:class_rank2"
              highlight-current-row
              style="width: 100%">
              <el-table-column
                property="rank"
                label="排名"
                width="50">
              </el-table-column>
              <el-table-column
                property="no"
                label="学籍号"
              >
              </el-table-column>
              <el-table-column
                property="name"
                label="姓名"
              >
              </el-table-column>
              <el-table-column
                property="num"
                :label="iszongshichang=='1'?'运动时长':'运动里程'">
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 100%;height:20px;display:flex;justify-content:center;padding:10px 0">
            <div> 当前名次</div>
            <div style="color: #3AA1FF;margin-left: 10px"><span> {{ analysisData.class_curr1 }}</span></div>
            <div style="color: #3AA1FF;margin-left: 10px;"><span> {{ analysisData.class_curr2 }}</span></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="yuanxiXMDJChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五行 -->
    <el-row :gutter="15">
      <el-col :lg="8" :md="8">
        <el-card
          shadow="never"
          header="100米短跑"
          body-style="10px 0px 10px 0px;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item>
                <el-select
                  filterable
                  clearable
                  v-model="formYuanxi.duanpao"
                  size="small"
                  placeholder="-请选择-"
                  @change="changeYuanxi()"
                  class="ele-fluid">
                  <el-option v-for="item in paobuList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div style="border: 1px solid #F3F5FE;border-radius: 10px;padding: 10px 10px;">
            <div style="color:#3AA1FF;margin-bottom: 8px">最佳成绩</div>
            <div style="display: flex;justify-content: center;align-items: center">
            <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
              <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.duanpao.good }}</div>
              <div>最好成绩</div>
            </div>
            <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
              <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.duanpao.good_score }}</div>
              <div>最好得分</div>
            </div>
            <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
              <div style="margin-bottom: 6px;height: 20px;font-size: 16px;">{{ analysisData.duanpao.grade_rank }}</div>
              <div>班级排名</div>
            </div>
            <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
              <div style="margin-bottom:6px;height: 20px;font-size: 16px;">{{ analysisData.duanpao.class_rank }}</div>
              <div>年级</div>
            </div>
          </div>
          </div>
          <ele-chart
            ref="visitHourChart"
            style="height: calc(188px);"
            :option="duanpaopie"/>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="8">
        <el-card
          shadow="never"
          header="一分钟跳绳"
          body-style="10px 0px 10px 0px;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="">
                <el-select
                  filterable
                  clearable
                  v-model="formYuanxi.tiaosheng"
                  size="small"
                  placeholder="-请选择-"
                  @change="changeYuanxi()"
                  class="ele-fluid">
                  <el-option v-for="item in tiaoshengList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div style="border: 1px solid #F3F5FE;border-radius: 10px;padding: 10px 10px;">
            <div style="color:#3AA1FF;margin-bottom: 8px">最佳成绩</div>
            <div style="display: flex;justify-content: center;align-items: center">
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.tiaosheng.good }}</div>
                <div>最好成绩</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.tiaosheng.good_score }}</div>
                <div>最好得分</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 6px;height: 20px;font-size: 16px;">{{ analysisData.tiaosheng.grade_rank }}</div>
                <div>班级排名</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:6px;height: 20px;font-size: 16px;">{{ analysisData.tiaosheng.class_rank }}</div>
                <div>年级</div>
              </div>
            </div>
          </div>

          <ele-chart
            ref="visitHourChart"
            style="height: calc(188px);"
            :option="tiaoshengpie"/>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="8">
        <el-card
          shadow="never"
          header="肺活量"
          body-style="10px 0px 10px 0px;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="border: 1px solid #F3F5FE;border-radius: 10px;padding: 10px 10px;">
            <div style="color:#3AA1FF;margin-bottom: 8px">最佳成绩</div>
            <div style="display: flex;justify-content: center;align-items: center">
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.feihuo.good }}</div>
                <div>最好成绩</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:  6px;height: 20px;font-size: 14px;">{{ analysisData.feihuo.good_score }}</div>
                <div>最好得分</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom: 6px;height: 20px;font-size: 16px;">{{ analysisData.feihuo.grade_rank }}</div>
                <div>班级排名</div>
              </div>
              <div  class="top-item" style="display: flex;flex-direction: column;justify-content:center;">
                <div style="margin-bottom:6px;height: 20px;font-size: 16px;">{{ analysisData.feihuo.class_rank }}</div>
                <div>年级</div>
              </div>
            </div>
          </div>

          <ele-chart
            ref="visitHourChart"
            style="height: calc(188px);"
            :option="feihuoliangpie"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart,},
  data() {
    return {
      xuenianList:[],
      name          : '',
      analysisData  : {},
      iszongshichang: true,
      class_rank1   : [],
      class_rank2   : [],
      canyun_ting:{},
      canyun_tingData:[],
      //   各项目等级
      project_levelData: [],
      // 支付笔数
      payNumData: [],
      // 销售量搜索参数
      saleSearch: {
        type: 'saleroom',
        dateType: 0,
        datetime: ''
      },
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      // 学院
      xueYuanData:[],
      // 词云数据
      hotSearchData: [],
      schoolForm   : {
        tongji   : '',
        begin    : '',
        end      : '',
        start_end: []
      },
      formYuanxi   : {
        duanpao:'',
        tiaosheng:''
      },
      memberId     : '',
      feihuoData   : [],
      feihuoX      : [],
      tiaoshengData: [],
      tiaoshengX   : [],
      duanpaoData  : [],
      duanpaoX     : [],
      high_bmiDataX: [],
      high_bmiData : [],
      tiaoshengList:[],
      paobuList:[],
      fullscreenLoading:false
    };
  },
  created(){
    console.log("====111")
    this.memberId = this.$route.query.id
    this.name     = this.$route.query.name
    this.getXueList()
    this.getpaobuProject()
    this.gettiaoshengProject()
    this.getAllData()
  },
  computed: {
	  // 学院
	  xueYuanChartOption() {
		  /*if (!this.visitHourData.length) {
			return {};
		  }*/
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '学院'
			  },
			  grid:{
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  tooltip: {
				  trigger: 'axis',
				  formatter(params) {
					  let val0 = params[0]["value"];
					  let val1 = params[1]["value"];
					  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
					  let data0 = `${circle}#00BFFF"></span> ${
						  params[0]["seriesName"]
					  }: ${val0}人`;
					  let data1 = `${circle}#00EE76"></span> ${
						  params[1]["seriesName"]
					  }: ${val1}h`;
					  return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;
				  }
			  },
			  legend : {
				  data: ['运动人数', '运动时长'],
				  y   : 'bottom'
			  },
			  xAxis  : [
				  {
					  type       : 'category',
					  boundaryGap: false,
					  data       : this.canyun_tingData.map(d => d.time)
				  }
			  ],
			  yAxis  : [
				  {
					  type: 'value'
				  }
			  ],
			  series: [
				  {
					  name     : '运动人数',
					  type     : 'line',
					  smooth   : true,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data     : this.canyun_tingData.map(d => d.views),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}人'
					  }
				  },
				  {
					  name     : '运动时长',
					  type     : 'line',
					  smooth   : true,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data     : this.canyun_tingData.map(d => d.visits),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}h'
					  }
				  }
			  ]
		  }
	  },
    shengaopieTopOne() {
      return {
        grid:{
          x:0,
          y:0,
          x2:0,
          y2:0
        },
        legend: {
          show:false,
          type: 'scroll',
          orient: 'vertical',
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          y: 'top',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data: [
            '合格率', '不合格率'
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '50%'],
            center: ['25%', '50%'],
            label: {
              position: 'center',
              fontSize: 14,
              color: '#333',
              formatter: this.analysisData.hegelv + '% '
            },
            labelLine: {
              show: false
            },
            data: [{ value: 1548, name: `全部` }],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            itemStyle: {
              opacity: 0.7,
              margin:10,
              color:'#fff'
            },
          },
          {
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
            center: ['25%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {
                value    : this.analysisData.hegelv, name: '合格率',
                itemStyle: {
                  opacity     : 0.7,
                  margin      : 10,
                  color       : '#00F0FF',
                  borderRadius: 15
                },
              },
              {
                value    : 100 - this.analysisData.hegelv, name: '不合格率',
                itemStyle: {
                  opacity     : 0.7,
                  margin      : 10,
                  color       : '#cecdcd',
                  borderRadius: 15
                },
              },
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieTop(){
      return {
        grid:{
          top:'-6%'
        },
        legend: {
          orient: 'vertical',
          x: '50%',               // 水平安放位置，默认为全图居中，可选为：
          y: '16%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data: [
            '污水处理',
            '电力'
          ]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
            center: ['20%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {
                value: 648, name: '污水处理',
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#00F0FF',
                  borderRadius: 15
                },},
              { value: 294, name: '电力' ,
                itemStyle: {
                  opacity: 0.7,
                  margin:10,
                  color:'#7d10f1',
                  borderRadius: 15
                },}
            ],
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    shengaopieThrid(){
      return {
        series: [
          {
            type: 'gauge',
            radius: '80%', //修改表盘大小
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 12,
            itemStyle: {
              color: '#FFAB91'
            },
            progress: {
              show: true,
              width: 12
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 12
              }
            },
            axisTick: {
              distance: -20,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              distance: -24,
              length: 10,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 12
            },
            anchor: {
              show: false
            },
            title: {
              offsetCenter: [0, '24%'],
              fontSize: 12
            },
            detail: {
              valueAnimation: true,
              width: '100%',
              lineHeight: 20,
              borderRadius: 8,
              offsetCenter: [0, '-2%'],
              fontSize: 16,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: 'inherit',


            },

            data: [
              {
                value: 20,
                name:'总时长'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '80%', //修改表盘大小
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            itemStyle: {
              color: '#FD7347'
            },
            progress: {
              show: true,
              width: 8
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 20
              }
            ]
          }
        ]
      }
    },
    //运动时长

    duanpaopie(){
      return {
        grid  : {
          x : 0,
          y : 0,
          x2: 0,
          y2: 0
        },
        legend: {
          type       : 'scroll',
          orient     : 'vertical',
          x          : 'right',               // 水平安放位置，默认为全图居中，可选为：
          y          : '20%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding    : 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth : 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle : {
            color: '#333'    // 图例文字颜色
          },
          data      : this.duanpaoX
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.duanpaoData,
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    tiaoshengpie(){
      return {
        grid  : {
          x : 0,
          y : 0,
          x2: 0,
          y2: 0
        },
        legend: {
          type       : 'scroll',
          orient     : 'vertical',
          x          : 'right',               // 水平安放位置，默认为全图居中，可选为：
          y          : '20%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding    : 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth : 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle : {
            color: '#333'    // 图例文字颜色
          },
          data      : this.tiaoshengX
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.tiaoshengData,
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    feihuoliangpie(){
      return {
        grid  : {
          x : 0,
          y : 0,
          x2: 0,
          y2: 0
        },
        legend: {
          type       : 'scroll',
          orient     : 'vertical',
          x          : 'right',               // 水平安放位置，默认为全图居中，可选为：
          y          : '20%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding    : 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth : 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle : {
            color: '#333'    // 图例文字颜色
          },
          data      : this.feihuoX
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '50%'],
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.feihuoData,
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    //   各院系项目等级
    yuanxiXMDJChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text: '各项目平均分'
        },
        grid: {
          top:'15%',
        },
        legend: {},
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#26ee5e','#36c9f6','#f1be17','#ff0230'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val[index+1]}分`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        color:['#26ee5e','#36c9f6','#f1be17','#ff0230'],
        dataset: {
          source: this.project_levelData
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#26ee5e',
            },
          },
          {
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color:'#36c9f6',
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#f1be17',
            },
          }
        ]
      }
    },
    shengaobarTop(){
      return {
		  title:{
			  text: 'BMI指数'
		  },
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        xAxis: {
          type: 'category',
          data: this.high_bmiDataX
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: [
            '身高体重'
          ]
        },
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["name"]
				      }: ${val}`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
	      color:['#00BFFF'],
        series: [
          {
            label: {
              show: true,
              position: 'top',
              valueAnimation: true,
              formatter(params){
                console.log("====params",params)
                // 根据params来做判断显示
                return params.name
              }
            },
            data: this.high_bmiData,
            type: 'bar'
          }
        ]
      };
    }

  },
  mounted() {
  },
  methods: {
    changeyundong(type) {
      this.iszongshichang = type
    },
    getXueList() {
      this.$http.get('/annual/getXueList').then(res => {
        if (res.data.code === 0) {
          this.xuenianList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 选择日期
     */
    chooseDate(e) {
      console.log("====1", e)
      this.schoolForm.begin = e[0];
      this.schoolForm.end   = e[1];
      this.getAllData();
    },
    /* 学院 */
    getxueYuanData() {
      this.project_levelData = this.analysisData.project_avgs;
      this.class_rank1       = this.analysisData.class_rank1;
      this.class_rank2       = this.analysisData.class_rank2;
      this.canyun_ting            = this.analysisData.canyun_ting;
      this.canyun_tingData        = this.analysisData.canyun_ting.canyu_data;
      let arr  = [];
      let arrx = [];
      this.analysisData.duanpao.data.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr.push(obj)
        arrx.push(item.name)
      });
      this.duanpaoData = arr;
      this.duanpaoX    = arrx;

      let arr2  = [];
      let arrx2 = [];
      this.analysisData.tiaosheng.data.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr2.push(obj)
        arrx2.push(item.name)
      });
      this.tiaoshengData = arr2;
      this.tiaoshengX    = arrx2

      let arr3  = [];
      let arrx3 = [];
      this.analysisData.feihuo.data.map((item) => {
        let obj = {
          "value"  : item.value,
          "name"   : item.name,
          itemStyle: {
            opacity     : 0.7,
            margin      : 10,
            borderRadius: 15
          }
        }
        arr3.push(obj)
        arrx3.push(item.name)
      });
      this.feihuoData    = arr3;
      this.feihuoX       = arrx3;
      this.high_bmiDataX = this.analysisData.high_bmi.data;
      this.high_bmiData  = this.analysisData.high_bmi.datas;

    },
    /* 获取基本的chart 数据 */
    getAllData() {
      let params = {
        ...this.schoolForm,
        ...this.formYuanxi,
        memberId: this.memberId,
      }
      this.fullscreenLoading = true;
      this.$http.post('/data/students', params).then(res => {
        if (res.data.code === 0) {
          this.analysisData = res.data.data;
          //   获取学院数据
          this.getxueYuanData();
        } else {
          this.$message.error(res.data.msg);
        }
        this.fullscreenLoading = false;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getpaobuProject(){
      this.$http.get('/data/paobu').then(res => {
        if (res.data.code === 0) {
          this.paobuList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    gettiaoshengProject(){
      this.$http.get('/data/paobu').then(res => {
        if (res.data.code === 0) {
          this.tiaoshengList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 图表选择院系
     * **/
    changeYuanxi(){
      this.getAllData();
    },
  },
  activated() {
    ['visitChart', 'payNumChart', 'saleChart', 'visitHourChart', 'hotSearchChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
/deep/.el-card>.el-card__header{
  font-weight: bold;
  border-bottom: none;
  font-size:18px;
  padding-left: 4px!important;

}
/deep/.teshu-card .el-card__body{
  padding: 0!important;
}
.analysis-chart-card-head{
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
  .el-icon-dash{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  div{
    font-size: 18px;
    font-weight: bold;
  }
}
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
.moddile-item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-right: 20px;
  div{
    &:first-child{
      margin-bottom: 10px;
    }
  }
}
.u-flex-center{
  display: flex;
  justify-content: center;
  width: 100%;
}
.top-item{
  width: 100%;
  div{
    display: flex;
    justify-content: center;
    &:first-child{
      font-size: 12px;
    }
    &:last-child{
      font-size: 10px;
      color:#8E8E8E;
    }
  }
}
</style>
